<template>
  <div :id="mathId" v-loading="load">
    <vue-ueditor-wrap v-if="showUe" ref="vuw" v-model="val" :destroy="true" :config="myConfig" @ready="ready" />
  </div>
</template>
<script>
import VueUeditorWrap from 'vue-ueditor-wrap'
import control from '@/mixins/control'
const RndNum = n => {
  var rnd = ''
  for (var i = 0; i < n; i++) {
    rnd += Math.floor(Math.random() * 100)
  }
  return rnd
}
export default {
  components: {
    VueUeditorWrap
  },
  mixins: [control],
  data() {
    const { fileServer, fileToken } = window.config
    const myConfig = {
      elementPathEnabled: true,
      wordCount: false, // 是否开启字数统计
      myWordRule: true, // 是否开启word的统计规则
      maximumWords: 1000000,
      autoHeightEnabled: false,
      autoFloatEnabled: false,
      initialFrameHeight: '320',
      initialFrameWidth: '100%',
      serverUrl: `/api/ergo/common/resource/resource/upload4RichText`,
      // 图片配置
      imageAllowFiles: ['.png', '.jpg', '.jpeg', '.gif'],
      imageActionName: 'uploadimage',
      imageUrlPrefix: '',
      imageFieldName: 'file',
      imageCompressEnable: true,
      imageCompressBorder: 1600,
      // 视频配置
      videoActionName: 'uploadvideo',
      videoFieldName: 'file',
      videoPathFormat: '',
      videoUrlPrefix: '',
      videoMaxSize: 102400000,
      videoAllowFiles: [
        '.flv',
        '.swf',
        '.mkv',
        '.avi',
        '.rm',
        '.rmvb',
        '.mpeg',
        '.mpg',
        '.ogg',
        '.ogv',
        '.mov',
        '.wmv',
        '.mp4',
        '.webm',
        '.mp3',
        '.wav',
        '.mid'
      ],
      // 文件配置
      fileActionName: 'uploadfile',
      fileFieldName: 'file',
      filePathFormat: '',
      fileUrlPrefix: '',
      fileMaxSize: 51200000,
      fileAllowFiles: [
        '.png',
        '.jpg',
        '.jpeg',
        '.gif',
        '.bmp',
        '.flv',
        '.swf',
        '.mkv',
        '.avi',
        '.rm',
        '.rmvb',
        '.mpeg',
        '.mpg',
        '.ogg',
        '.ogv',
        '.mov',
        '.wmv',
        '.mp4',
        '.webm',
        '.mp3',
        '.wav',
        '.mid',
        '.rar',
        '.zip',
        '.tar',
        '.gz',
        '.7z',
        '.bz2',
        '.cab',
        '.iso',
        '.doc',
        '.docx',
        '.xls',
        '.xlsx',
        '.ppt',
        '.pptx',
        '.pdf',
        '.txt',
        '.md',
        '.xml'
      ],

      UEDITOR_HOME_URL: '/rich-text/bdueditorv1.0/',
      toolbars: [
        [
          'fullscreen',
          'source',
          '|',
          'undo',
          'redo',
          '|',
          'bold',
          'italic',
          'underline',
          'fontborder',
          'strikethrough',
          'superscript',
          'subscript',
          'removeformat',
          'formatmatch',
          'autotypeset',
          'blockquote',
          'pasteplain',
          '|',
          'forecolor',
          'backcolor',
          'insertorderedlist',
          'insertunorderedlist',
          'selectall',
          'cleardoc',
          '|',
          'rowspacingtop',
          'rowspacingbottom',
          'lineheight',
          '|',
          'customstyle',
          'paragraph',
          'fontfamily',
          'fontsize',
          '|',
          'directionalityltr',
          'directionalityrtl',
          'indent',
          '|',
          'justifyleft',
          'justifycenter',
          'justifyright',
          'justifyjustify',
          '|',
          'touppercase',
          'tolowercase',
          '|',
          'link',
          'unlink',
          'anchor',
          '|',
          'imagenone',
          'imageleft',
          'imageright',
          'imagecenter',
          '|',
          'simpleupload',
          'insertimage',
          'emotion',
          'insertvideo',
          // "music",
          'attachment',
          'map',
          // "gmap",
          'insertframe',
          'insertcode',
          // "webapp",
          'pagebreak',
          'template',
          'background',
          '|',
          'horizontal',
          'date',
          'time',
          'spechars',
          'snapscreen',
          'wordimage',
          '|',
          'inserttable',
          'deletetable',
          'insertparagraphbeforetable',
          'insertrow',
          'deleterow',
          'insertcol',
          'deletecol',
          'mergecells',
          'mergeright',
          'mergedown',
          'splittocells',
          'splittorows',
          'splittocols',
          'charts',
          '|',
          'print',
          'preview',
          'searchreplace',
          'drafts',
          'help'
        ]
      ]
    }
    return {
      mathId: 'ueditor' + RndNum(6),
      editor: null,
      myConfig,
      load: true,
      showUe: false
    }
  },
  computed: {
    returnValue() {
      return this.val
    },
    disabled() {
      if (this.config && this.config.disabled) {
        return this.config.disabled
      }
      return false
    }
  },
  mounted() {
    this.showUe = true
  },
  created() {
    if (this.value === null || typeof this.value === 'undefined') {
      this.val = ''
    } else {
      this.val = this.value
    }
  },
  methods: {
    ready(editorInstance) {
      this.load = false
      this.disabled && editorInstance.setDisabled()
      editorInstance.addListener('blur', () => {
        // $c.log(212)
        var content = editorInstance.getContentLength(true)
        window.sessionStorage.setItem('countNum', content)
      })
    }
  }
}
</script>
<style lang="scss">
.edui-editor {
  line-height: 1;
}
// /deep/ .edui-default .edui-editor-toolbarbox {
//   position: relative !important;
// }
// /deep/ .edui1_toolbarbox {
//   position: relative !important;
// }
</style>
